<template>
	<scroll-view scroll-y class="scrollSty" @scrolltolower="scrolltolowerFnc">
		<!-- 用户 -->
		<view class="user-main">
			<!-- 用户信息 -->
			<view class="user-info">
				<view class="userImage">
					<image :src="imageUrls(userInfo.avatar)" mode="scaleToFill" style="width: 110rpx; height: 110rpx; border-radius: 50%; background-color: #fff"></image>
				</view>
				<view class="userInfos">
					<view class="Infos">
						<view class="Infos-name" v-if="tokenValue">
							<text style="margin-right: 4rpx" class="name">
								{{ userInfo.nickname || '暂无信息' }}
							</text>
							<u-icon name="edit-pen-fill" color="#555" size="22" @click="gotoPath('/pages/editUser/editUser')"></u-icon>
						</view>
						<view class="Infos-name loginMian" @click="loginPath()" v-else>
							<text>立即登录/注册</text>
						</view>
						<view class="Infos-option" v-if="tokenValue">
							<!-- v-if="vipInfo.is_vip" -->
							<uni-icons type="shop-filled" size="22" color="#555" class="icon-option" @click="changeStoreAuthOpen()"></uni-icons>
							<uni-icons type="gear" size="22" color="#555" class="icon-option" @click="gotoPath('/pages/accountSetting/accountSetting')"></uni-icons>
							<uni-badge :text="messageNum" absolute="rightTop" size="small">
								<uni-icons type="notification" size="22" class="icon-option" color="#555" @click="gotoPath('/pages/message/message')"></uni-icons>
							</uni-badge>
						</view>
					</view>
					<view class="member" v-if="tokenValue">
						<view class="member-vip">
							<image
								src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241213/c5488a2b0d2c11c74427cbee48a574b2.png"
								style="width: 50rpx; height: 30rpx"
							></image>
							<text>{{ vipInfo.is_vip ? '超级会员' : '普通用户' }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 用户操作 -->
			<view class="orderType-list">
				<view class="orderType-list-item" v-for="(item, index) in userOptionList" :key="index" @click="gotoPath(item.path)">
					<view class="orderType-list-item-image nums">
						{{ formatAmount(item.value) }}
					</view>
					<view class="orderType-list-item-title titles">
						{{ item.name }}
					</view>
				</view>
			</view>

			<!-- 订单状态 -->
			<view class="orderType-list">
				<view
					class="orderType-list-item"
					v-for="(item, index) in orderType"
					:key="index"
					@click="gotoPath(`/pages/order/order?id=${item.value}`)"
					:class="[index == 4 ? 'itemBorder' : '']"
				>
					<uni-badge :text="item.badge" absolute="rightTop">
						<view class="orderType-list-item-image">
							<image :src="item.iconPath" mode="widthFix" style="width: 55rpx; height: 55rpx"></image>
						</view>
					</uni-badge>
					<view class="orderType-list-item-title">
						{{ item.name }}
					</view>
				</view>
			</view>

			<!-- 常用功能 -->
			<view class="common-function" v-if="classifyListData.length > 0">
				<view class="common-function-title">常用功能</view>
				<view class="hwxcShopClassify_main">
					<view v-for="(item, index) in classifyListData" :key="index" style="width: 25%" @click="toPath(item)">
						<view v-if="index != 6" class="hwxcShopClassify_item">
							<image :src="imageUrls(item.image)" class="hwxcShopClassify_item_image" mode="widthFix"></image>
							<text>
								{{ item.name }}
							</text>
						</view>
						<button open-type="contact" v-else class="changeImageBtn">
							<image :src="imageUrls(item.image)" style="width: 80rpx; height: 80rpx; border-radius: 50%"></image>
							<text>
								{{ item.name }}
							</text>
						</button>
					</view>
				</view>
			</view>

			<!-- 热销产品 -->
			<view class="shoppingCart-hotShop">
				<view class="hotShop-title" style="display: flex; align-items: center; justify-content: center">
					<view class="imgSty"></view>
					<image
						src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241209/129e6e2b9af09cad149ce1fcd976c8f2.png"
						mode="widthFix"
						style="width: 240rpx; margin: 0px 20rpx"
					></image>
					<view class="imgSty"></view>
				</view>
				<view class="hotShop">
					<hwxcShopItem :shopList="shopListData" shopType="0" />
				</view>
			</view>

			<!-- 商家端登录选择 -->
			<u-action-sheet
				:actions="list"
				title="选择身份"
				cancelText="取消"
				@select="getSelect"
				:show="show"
				@close="getClose"
				:safeAreaInsetBottom="true"
				:closeOnClickOverlay="true"
				:closeOnClickAction="true"
			></u-action-sheet>
			
			<hwxcTabbar/>
		</view>
	</scroll-view>
</template>

<script>
import hwxcShopItem from '../../components/hwxcShopItem/hwxcShopItem.vue';
import { homeGoodsList, userOrderCount, userNumCount, userVip, userInfo, userNoticeUnread } from '../../api/home/index.js';
import { flashManageInfo, storeOpen } from '../../api/flashManage/index.js';
import { imageUrl, formatAmountWk } from '../../utils/tools.js';
import hwxcTabbar from '../../components/hwxcTabbar.vue';
export default {
	data() {
		return {
			userOptionList: [
				{
					name: '余额',
					value: '0.00',
					id: 1,
					path: '/pages/balance/balance'
				},
				{
					name: '红包卡券',
					value: '0',
					id: 1,
					path: '/pages/redPacket/redPacket'
				},
				{
					name: '买过',
					value: '0',
					id: 1,
					path: '/pages/haveBought/haveBought'
				},
				{
					name: '收藏',
					value: '0',
					id: 1,
					path: '/pages/collect/collect'
				},
				{
					name: '足迹',
					value: '0',
					id: 1,
					path: '/pages/footmark/footmark'
				}
			],

			orderType: [
				{
					name: '待付款',
					value: '1',
					iconPath: '../../static/image/dfk.png'
				},
				{
					name: '待发货',
					value: '2',
					iconPath: '../../static/image/dfh.png'
				},
				{
					name: '待收货',
					value: '3',
					iconPath: '../../static/image/dsh.png'
				},
				{
					name: '已完成',
					value: '4',
					iconPath: '../../static/image/tk.png'
				},
				{
					name: '我的订单',
					value: '0',
					iconPath: '../../static/image/dd1.png'
				}
			],

			classifyListData: [
				{
					name: '我的处方',
					image: '/uploads/20241128/94e9c2a2fe58cdcbcf98a38ffe9a7be8.png',
					path: ''
				},
				{
					name: '健康档案',
					image: '/uploads/20241128/926fa91c91400323397f979f010f7e0b.png',
					path: '/pages/healthRecord/healthRecord'
				},
				{
					name: '地址管理',
					image: '/uploads/20241128/36cb9ad8ee80b9c3aa86532c6be0cb1a.png',
					path: '/pages/addressList/addressList'
				},
				{
					name: '清关信息',
					image: '/uploads/20241128/241cfdf8b8fd826b66aa1aba968778c2.png',
					path: '/pages/addRealNameinfo/addRealNameinfo'
				},
				{
					name: '系统设置',
					image: '/uploads/20241128/67e2ab92ffe22bfc4fa90011781f92ce.png',
					path: '/pages/accountSetting/accountSetting'
				},
				{
					name: '建议反馈',
					image: '/uploads/20241128/f594fbe10159034da0294deb55a10476.png',
					path: '/pages/suggestionFeedback/suggestionFeedback'
				},
				{
					name: '专属客服',
					image: '/uploads/20241128/b04dc2e6bbdb73b0ea6cd5bf8b9535e8.png',
					path: ''
				},
				{
					name: '付费会员',
					image: '/uploads/20241128/d4309c564e883c5a3fa3c2e678a5d043.png',
					path: '/pages/invite/invite'
				},
				{
					name: '我的邀请',
					image: '/uploads/20241216/d2c9ddbec2575ef9805d5ba11aaeb49a.png',
					path: '/pages/maInvite/maInvite'
				},
				{
					name: '邀请记录',
					image: '/uploads/20241216/4a91a3ce4e32114a10314f8a7e175eb2.png',
					path: '/pages/InviteLogs/InviteLogs'
				}
			],
			// 商品参数
			shopQuery: {
				page: 1,
				limit: 10,
				category_id: '',
				type: '0',
				store_id: '0'
			},
			// 商品数据
			shopListData: [],
			// 用户信息
			userInfo: {
				nickname: '',
				avatar: ''
			},
			// 身份选择
			list: [
				{
					name: '云店商家(企业)',
					value: '1'
				},
				{
					name: '闪送商家(企业)',
					value: '2'
				},
				{
					name: '个人创客',
					value: '3'
				}
			],
			show: false,
			tokenValue: '',
			vipInfo: {},
			messageNum: null
		};
	},
	components: {
		hwxcShopItem,
		hwxcTabbar
	},

	onShareAppMessage() {
		return {
			title: '用户中心',
			path: 'pages/user/user'
		};
	},

	onShareTimeline() {
		return {
			title: '用户中心',
			query: 'pages/user/user'
		};
	},
	async onShow() {
		this.tokenValue = await uni.getStorageSync('token');

		// 登录之后调用
		if (this.tokenValue) {
			await this.getuserInfo();
			await this.getuserOrderCount();
			await this.getuserNumCount();
			await this.getuserVip();
			await this.getuserNoticeUnread();
		}

		await this.getHomeGoodsList();
	},
	methods: {
		gotoPath(path) {
			if (!this.tokenValue) {
				uni.showModal({
					title: '温馨提示',
					content: '登录后才可以操作',
					confirmText: '去登录',
					cancelText: '我知道了',
					confirmColor: '#e43927',
					success: async (res) => {
						if (res.confirm) {
							uni.reLaunch({
								url: '/pages/loginMain/loginMain'
							});
						}
					}
				});
			} else {
				uni.navigateTo({
					url: path
				});
			}
		},

		async getuserNoticeUnread() {
			try {
				const resData = await userNoticeUnread();
				this.messageNum = resData.data.num;
			} catch (e) {
				throw Error(e);
				//TODO handle the exception
			}
		},

		loginPath() {
			uni.navigateTo({
				url: '/pages/loginMain/loginMain'
			});
		},

		// 获取用户信息
		async getuserInfo() {
			try {
				const resData = await userInfo();
				const res = resData.data;
				this.userInfo = res;

				if (this.userInfo.shop.is_cloud) {
					this.list[0].subname = '已开通云店商家平台';
				}

				if (this.userInfo.shop.is_maker) {
					this.list[2].subname = '已开通创客平台';
				}

				if (this.userInfo.shop.is_flash || this.userInfo.shop.is_staff) {
					this.list[1].subname = '已开通闪电送商家平台';
				}

				if (this.userInfo.shop.is_cloud) {
					this.list = this.list.slice(0, 2);
				} else {
					if (this.userInfo.shop.is_maker) {
						this.list = this.list.slice(1, 2);
					}
				}
			} catch (e) {
				throw Error(e);
			}
		},

		// 获取会员信息
		async getuserVip() {
			try {
				const resData = await userVip();
				this.vipInfo = resData.data;
				if (this.vipInfo.is_vip) {
					this.classifyListData = this.classifyListData.filter((item) => {
						return item.name != '付费会员';
					});
				}
			} catch (e) {
				throw Error(e);
			}
		},

		async getuserNumCount() {
			try {
				const resData = await userNumCount();
				const orderNum = resData.data;
				this.userOptionList[3].value = orderNum.collect;
				this.userOptionList[0].value = orderNum.money;
				this.userOptionList[1].value = orderNum.red;
				this.userOptionList[2].value = orderNum.buy;
				this.userOptionList[4].value = orderNum.history;
			} catch (e) {
				throw Error(e);
			}
		},

		toPath(val) {
			if (!this.tokenValue) {
				uni.showModal({
					title: '温馨提示',
					content: '登录后才可以操作',
					confirmText: '去登录',
					cancelText: '我知道了',
					confirmColor: '#e43927',
					success: async (res) => {
						if (res.confirm) {
							uni.reLaunch({
								url: '/pages/loginMain/loginMain'
							});
						}
					}
				});
			} else {
				if (!val.path) {
					return uni.showToast({
						title: '暂未开放',
						icon: 'none'
					});
				} else {
					uni.navigateTo({
						url: val.path
					});
				}
			}
		},

		// 获取商品数据
		async getHomeGoodsList() {
			try {
				const resData = await homeGoodsList(this.shopQuery);
				let list = resData.data.data || [];
				const shopListData = [...(this.shopListData || []), ...list];
				shopListData.forEach((item) => {
					item.image = imageUrl(item.fileUrl);
				});
				this.shopListData = shopListData;
			} catch (e) {
				throw Error(e);
			}
		},

		// 图片路径拼接
		imageUrls(fileUrl) {
			return imageUrl(fileUrl);
		},

		// 获取订单数量
		async getuserOrderCount() {
			try {
				const resData = await userOrderCount();
				const orderNum = resData.data;
				this.orderType[3].badge = orderNum.complete;
				this.orderType[0].badge = orderNum.wait_pay;
				this.orderType[1].badge = orderNum.wait_delivery;
				this.orderType[2].badge = orderNum.wait_receive;
				this.orderType[4].badge = orderNum.all;
			} catch (e) {
				throw Error(e);
			}
		},

		// 触底加载
		scrolltolowerFnc() {
			this.shopQuery.page++;
			this.getHomeGoodsList();
		},

		// 商家身份选择
		changeStoreAuthOpen() {
			this.show = true;
		},

		// 关闭身份选择
		getClose() {
			this.show = false;
		},

		// 选择身份
		getSelect(val) {
			const { name, value } = val;
			if (value == '1') {
				this.getflashManageInfo(0);
			} else if (value == '2') {
				this.getflashManageInfo(1);
			} else if (value == '3') {
				this.getflashManageInfo(2);
			}
		},

		formatAmount(num) {
			return formatAmountWk(num);
		},

		// 门店信息获取信息
		async getflashManageInfo(type) {
			try {
				const resData = await flashManageInfo({
					type
				});
				const storeInfo = resData.data;
				this.$store.dispatch('getstoreInfoAsync', storeInfo);
				this.$store.dispatch('getstoreTypeAsync', type);
				if (storeInfo.status != 1) {
					if (storeInfo.status == 2 || storeInfo.status == 3) {
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/storeSide/storeExamine/storeExamine'
							});
						}, 300);
						return;
					} else if (storeInfo.status == -1) {
						setTimeout(() => {
							if (type == 0) {
								uni.navigateTo({
									url: '/pages/storeSide/cloudStoreEdit/cloudStoreEdit'
								});
							} else if (type == 1) {
								uni.navigateTo({
									url: '/pages/storeSide/flashStoreEdit/flashStoreEdit'
								});
							} else if (type == 2) {
								uni.navigateTo({
									url: '/pages/storeSide/makerApplication/makerApplication'
								});
							}
						}, 300);
						return;
					}
				} else {
					if (type == 0) {
						if (!storeInfo.name) {
							uni.showToast({
								title: '请完善店铺信息',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/storeSide/cloudStoreEdit/cloudStoreEdit'
								});
							}, 300);
							return;
						}

						if (!storeInfo.id_card_id) {
							uni.showToast({
								title: '请完善店铺资质',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/storeSide/cloudStoreAuthentication/cloudStoreAuthentication'
								});
							}, 300);
							return;
						}
					} else if (type == 1) {
						if (!storeInfo.yyg_orgid) {
							uni.showToast({
								title: '请完善企业信息',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/storeSide/flashOpen/flashOpen'
								});
							}, 300);
							return;
						}

						if (!storeInfo.name) {
							uni.showToast({
								title: '请完善店铺信息',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/storeSide/flashStoreEdit/flashStoreEdit'
								});
							}, 300);
							return;
						}

						if (!storeInfo.id_card_id) {
							uni.showToast({
								title: '请完善店铺资质',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/storeSide/flashStoreAuthentication/flashStoreAuthentication'
								});
							}, 300);
							return;
						}
					} else if (type == 2) {
						console.log(storeInfo);
						if (!storeInfo.name) {
							uni.showToast({
								title: '请完善信息',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/storeSide/makerApplication/makerApplication'
								});
							}, 300);
							return;
						}

						if (!storeInfo.id_card_id) {
							uni.showToast({
								title: '请完善店铺资质',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/storeSide/makerApplicationAuth/makerApplicationAuth'
								});
							}, 300);
							return;
						}
					}
				}
				uni.removeStorageSync('storeTabbarVal');
				uni.redirectTo({
					url: '/pages/storeSide/storeHome/storeHome'
				});
			} catch (e) {
				uni.showModal({
					title: '提示',
					content: e.msg,
					confirmText: '开通店铺',
					success: async (res) => {
						if (res.confirm) {
							if (type == 1) {
								uni.redirectTo({
									url: '/pages/storeSide/flashOpen/flashOpen'
								});
							} else if (type == 0) {
								const resData = await storeOpen({
									type: '0'
								});
								uni.redirectTo({
									url: '/pages/storeSide/cloudStoreEdit/cloudStoreEdit'
								});
							} else if (type == 2) {
								const resData = await storeOpen({
									type: '2'
								});
								uni.redirectTo({
									url: '/pages/storeSide/makerApplication/makerApplication'
								});
							}
						}
					}
				});
			}
		}
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	height: 100%;
}
</style>

<style scoped lang="scss">
.scrollSty {
	flex: 1;
	overflow: scroll;
}
.user-main {
	box-sizing: border-box;
	padding: 20rpx;
	.user-info {
		display: flex;
		height: 140rpx;
		.userImage {
			width: 130rpx;
		}
		.userInfos {
			flex: 1;
			height: 55px;
			.Infos {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 6rpx;
				.Infos-name {
					font-size: 28rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
					.name {
						max-width: 180rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.loginMian {
					height: 55px;
				}
				.Infos-option {
					display: flex;
					align-items: center;
					justify-content: space-between;
					max-width: 180rpx;
					margin-top: 8px;
					gap: 10px;
					margin-right: 10px;
					.icon-option {
						flex: 1;
						display: flex;
						justify-content: center;
					}
				}
			}
			.member {
				.member-vip {
					background-color: #000;
					color: #fff;
					font-size: 24rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					width: 90px;
					border-radius: 40rpx;
				}
			}
		}
	}
	.orderType-list {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin-bottom: 20rpx;
		padding-top: 30rpx;
		.orderType-list-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			.orderType-list-item-image {
				margin-bottom: 6rpx;
			}

			.orderType-list-item-title {
				font-size: 24rpx;
			}

			.nums {
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		.itemBorder {
			border-left: 1px #f4f4f4 solid;
		}
	}
	.common-function {
		background-color: #fff;
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 20rpx 0;
		.common-function-title {
			height: 60rpx;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 60rpx;
			box-sizing: border-box;
			padding: 0px 40rpx;
			color: #444;
		}
	}
	.shoppingCart-hotShop {
		.hotShop-title {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			color: #999;
		}
	}
}

.imgSty {
	width: 100rpx;
	height: 1px;
	background-color: #d9d9d9;
	display: inline-block;
}

.hwxcShopClassify_main {
	display: flex;
	flex-wrap: wrap;

	.hwxcShopClassify_item {
		height: 160rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 24rpx;
		.hwxcShopClassify_item_image {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 12rpx;
			border-radius: 50%;
			overflow: hidden;
		}
	}
}

.changeImageBtn {
	border: none !important;
	padding: 0px !important;
	background-color: transparent !important;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
	margin-top: 4px;
}

.changeImageBtn::after {
	border: none;
}
</style>
